<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<button>开始执行</button>
	<button>结束执行</button>

	<button>开始倒计时</button>
	<button>停止倒计时</button>
	<script type="text/javascript">
		//定时器：指事件间隔  就是多少秒再重复一次
		//setInterval(匿名函数/函数名， 事件间隔事件 单位(ms))
		//clearInterval(定时器名称) 清除定时器
		let time = null
		let a = 1
		var btns = document.querySelectorAll('button')

		btns[0].onclick = function() {
			time = setInterval(function() {
				console.log(a)
				a++;
			},1000)
		}

		//clearInterval 清除定时器
		btns[1].onclick = function() {
			clearInterval(time)
		}


		//延时器：达到一定时间后，只执行一次代码
		//setTimeout((匿名函数/函数名,延时时间  单位(ms))
		//clearTimeout(延时器名称) 清除延时器
		let time2 = null
		btns[2].onclick = function() {
			time2 = setTimeout(function() {
				console.log('时间到了')
			},4000)
		}

		//清除延时器 clearTimeout
		btns[3].onclick = function() {
			clearTimeout(time2)
			console.log('停止倒计时')
		}
	</script>
</body>
</html>